
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, List, Skeleton } from 'antd-mobile'
import { useMeta } from '@/stores'
import KeepAlive, { useAliveController } from 'react-activation'
import { RiInformation2Fill, RiFileListFill, RiEmotionLaughLine } from 'react-icons/ri'
import styles from './index.module.less'

type OperationItemType = {
  label: string
  key: string
  path: string
  icon: string | React.ReactNode
}
type OperationListType = OperationItemType[]

const ListItem = List.Item

const Mine = (props: any) => {

  const [count, setCount] = useState<number>(0)

  const navigate = useNavigate()
  const [operationList, setOperationList] = useState<OperationListType>([])
  const [finished, setFinished] = useState(false)

  useEffect(() => {
    initListData()
  }, [])

  const initListData = () => {
    const _operationList = [
      {
        label: '关于本应用',
        key: 'about',
        path: '/about',
        icon: <RiInformation2Fill size={24} color={'var(--adm-color-primary)'} />,
      },
      {
        label: '意见反馈',
        key: 'feedback',
        path: '/feedback',
        icon: <RiFileListFill size={24} color={'var(--adm-color-primary)'} />,
      },
    ]
    setOperationList(_operationList)
    setFinished(true)
  }

  const onOperationItemClick = (path: string) => {
    navigate('/mine' + path)
  }

  return <div className={styles.Mine}>
    <div className={styles.userInfo}>
      <div className={styles.avatar}>
        <RiEmotionLaughLine size={50} />
      </div>
      <div className={styles.userNameArea}>
        <div className={styles.userName}>卡卡q</div>
        <div className={styles.userDescription}>我是一个没有感情的情感导师。</div>
      </div>
    </div>
    <List
      className={styles.operationList}
    >
      {operationList.map((item: OperationItemType) => {
        return <ListItem
          className={styles.operationItem}
          key={item.key}
          prefix={item.icon}
          // isLink
          onClick={() => { onOperationItemClick(item.path) }}
        >{item.label}</ListItem>
      })}
    </List>
  </div>
}

const KeepAliveComponent = (props: any) => {

  const { setMeta } = useMeta((state) => state)

  useEffect(() => {
    setMeta('我的', 'menu-page')
  }, [])

  // const { dropScope } = useAliveController()

  return <KeepAlive name='mine' key='mine'>
    <Mine {...props} />
  </KeepAlive>
}


export default KeepAliveComponent
